.button {
	display: inline-block;
	flex-shrink: 0;
	height: 30px;
	margin: 1px 0 1px 0;
	padding: 5px 16px 5px 16px;

	text-decoration: none;

	border: 2px solid transparent;
	border-radius: $border-radius-large;
	outline: none;

	//Primary
	&--primary {
		@include font-ui-neg('small', 'medium');

		color: $figma-white;
		background-color: $figma-blue;

		&:enabled:active {
			border: 2px solid $figma-black-3;
		}

		&:disabled {
			background-color: $figma-black-3;
		}
	}

	//Primary Destructive
	&--primary-destructive {
		@include font-ui-neg('small', 'medium');

		color: $figma-white;
		background-color: $figma-red;

		&:enabled:active {
			border: 2px solid $figma-black-3;
		}

		&:disabled {
			opacity: 0.4;
		}
	}

	//Secondary
	&--secondary {
		@include font-ui-pos('small', 'medium');

		color: $figma-black-8;
		border: 1px solid $figma-black-8;
		background-color: $figma-white;

		&:enabled:active {
			padding: 4px 15px 4px 15px;

			border: 2px solid $figma-blue;
		}

		&:disabled {
			color: $figma-black-3;
			border: 1px solid $figma-black-3;
		}
	}

	&--secondary-destructive {
		@include font-ui-pos('small', 'medium');

		color: $figma-red;
		border: 1px solid $figma-red;
		background-color: $figma-white;

		&:enabled:active {
			padding: 4px 15px 4px 15px;

			border: 2px solid $figma-red;
		}

		&:disabled {
			opacity: 0.4;
		}
	}

	&--margin-right {
		margin-right: 8px;
	}
}
